<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>腾讯首页栅格布局</title>
	<link rel="stylesheet" href="./layui-v2.6.8/layui/css/layui.css" />
	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
			font-size: 18px;
			font-weight: bold;
		}
		body{
			background-color: papayawhip;
		}
		.div_nav2{
			position: relative;
			
			.nav_icon1{
				position: absolute;
				top: 10px;
				left: 10px;
				height: 30px;
				width: 30px;
				background-color: rgba(124, 34, 226, 0.5);
				z-index: 999;
			}
		}
		.color1{
			height: 50px;
			background-color: #e8e6e7;
		}
		.color2{
			height: 50px;
			background-color: #649958;
		}
		.color3{
			height: 500px;
			background-color: #8faeb7;
		}
		.color4{
			height: 500px;
			background-color: #d8d7df;
		}
		.color5{
			height: 500px;
			background-color: #879171;
		}
		.color6{
			height: 500px;
			background-color: #a76763;
		}
		.color7{
			height: 500px;
			background-color: #ffcf4b;
		}
		.color8{
			height: 500px;
			background-color: #08cdfe;
		}
		.color9{
			height: 500px;
			background-color: #c0bfa6;
		}
		.color10{
			height: 300px;
			background-color: #8d5764;
		}
		.color11{
			height: 300px;
			background-color: #aea4a7;
		}
		.color12{
			height: 300px;
			background-color: #d1d6e6;
		}
		.news{
			margin: 20px auto;
			position: relative;
		}
		/* 屏幕为手机时 xs */
		@media(max-width:575px){
			.news{
				width: 100%;
				background-color: green;
			}
		}
		/* 屏幕为平板时 sm */
		@media(min-width:576px) and (max-width:767px){
			.news{
				width: 100%;
			}
		}
		/* 屏幕为电脑时 md */
		@media(min-width:768px) and (max-width:991px){
			.news{
				width: 768px;
			}
		}
		/* 屏幕为大荧幕时 lg */
		@media(min-width:992px){
			.news{
				width: 992px;
			}
		}
	</style>
	<body>
		<!-- 腾讯首页栅格布局 -->
		<div class="div_tx">
			<!-- 导航栏-->
			<div class="layui-row div_nav1 layui-hide-xs" style="margin-top: 50px;">
				<!-- 在手机上占12份 平板上占8份 电脑上占4份 -->
				<div class="layui-col-xs12 layui-col-sm3 layui-col-md4 color1">
					logo
				</div>
				<!-- 在手机上占12份 平板上占4份 电脑上占8份 -->
				<div class="layui-col-xs12 layui-col-sm9 layui-col-md8 color2">
					下拉菜单
				</div>
			</div>
			<div class="layui-row div_nav2 layui-hide-sm layui-hide-md" style="margin-top: 50px;">
				<!-- 在手机上占12份 平板上占8份 电脑上占4份 -->
				<div class="layui-icon-spread-left nav_icon1"></div>
				<!-- 在手机上占12份 平板上占4份 电脑上占8份 -->
				<div class="layui-col-xs12 layui-col-sm12 layui-col-md12 color2">
					下拉菜单
				</div>
			</div>
			
			<!-- 主体内容 -->
			<div class="layui-row div_body news" style="margin-top: 50px;">
				<!-- 第一模块 -->
				<div class="layui-col-xs12 layui-col-sm8 layui-col-md6 color3">1-1</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md6 color4">1-2</div>
				
				<!-- 第二模块 -->
				<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 color5">2-1</div>
				<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 color6">2-2</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color7">2-3</div>
				
				<!-- 第三模块 -->
				<div class="layui-col-xs12 layui-col-sm8 layui-col-md6 color8">3-1</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md6 color9">3-2</div>
				
				<!-- 第四模块 -->
				<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 color10">4-1</div>
				<div class="layui-col-xs6 layui-col-sm4 layui-col-md4 color11">4-2</div>
				<div class="layui-col-xs12 layui-col-sm4 layui-col-md4 color12">4-3</div>
			</div>
		</div>
	</body>
</html>
<script src="./layui-v2.6.8/layui/layui.js"></script>